<template>
  <view class="cus-swiper-upload">
    <view class="cus-swiper-upload__swiper">
      <view class="cus-swiper-upload__swiper-init" v-if="!swiperList.length">
        <text class="text-lg">上传视频</text>
        <text>推荐尺寸：686x320</text>
      </view>
      <u-swiper v-else :list="swiperList" height="320rpx" circular autoplay indicator bgColor="#F7F8FA"
                :interval="2000"></u-swiper>
    </view>
    <view class="active-info-video" v-if="!videoShow">

      <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="2" multiple
                :maxCount="1" accept="video">
        <view class="img-top">
          <img
              src="https://file.casugn.com/storecompcard//sbr11r9ji8lmd1bbba35f5324c1da5b910e53f3d8ac5_1681285322874.png"
              alt="">
          <text>上传视频</text>
        </view>
      </u-upload>
    </view>
  </view>
</template>

<script>
export default {
  options: {
    styleIsolation: 'shared', // 解除样式隔离
  },
  props: {
    // upload组件的name
    name: {
      type: String,
      default: ''
    },
    // 以逗号分割的url字符串
    imgs: {
      type: String,
      default: ''
    },
    // 开发者服务器 url
    uploadUrl: {
      type: String,
      default: ''
    },
    // upload组件的maxCount
    maxCount: {
      type: Number,
      default: 1
    },
  },
  data() {
    return {
      fileList: [],
    }
  },
  computed: {
    swiperList() {
      return this.fileList.filter(item => item.status === 'success').map(item => item.filePath)
    }
  },
  watch: {
    imgs: {
      handler(nVal) {
        this.fileList = (!nVal ? [] : nVal.split(",")).map(item => {
          return {
            status: 'success',
            url: item,
            filePath: item,
          }
        })
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    getUrl() {
      return this.swiperList.join(',')
    },

    // 新增视频
    async afterRead(event) {
      console.log('新增视频', event);
      let lists = [].concat(event.file)
      let fileListLen = this.fileList.length
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this.fileList[fileListLen]
        this.fileList.splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: event.name,
          url: result,
          fileName: event.file.type + event.file.size + '',
          filePath: result
        }))
        fileListLen++
      }
      console.log(this.fileList, 'video')
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.uploadUrl,
          filePath: url,
          name: 'file',
          success: (res) => {
            let data = JSON.parse(res.data)
            if (data.success) {
              resolve(data.message)
            }
          }
        });
      })
    },
    // 删除视频
    deletePic(event) {
      this.fileList.splice(event.index, 1)
    },
  }
}
</script>

<style lang="scss" scoped>
.cus-swiper-upload {
  .cus-swiper-upload__swiper {
    width: 686rpx;
    height: 320rpx;
    margin-bottom: 16rpx;
    background-color: #F7F8FA;

    .cus-swiper-upload__swiper-init {
      width: 100%;
      height: 100%;
      font-size: 24rpx;
      color: #86909C;
      line-height: 34rpx;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .text-lg {
        margin-bottom: 16rpx;
        font-size: 32rpx;
        line-height: 44rpx;
      }
    }
  }

  .active-info-video {
    margin-top: 20upx;
    width: 160rpx;
    height: 160rpx;
    background: #F7F8FA;
    position: relative;
    overflow: hidden;

    .img-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;

      img {
        display: block;
        width: 40rpx;
        height: 40rpx;
        margin: 0 auto;
        margin-top: 56rpx;
      }

      text {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #86909C;
        line-height: 34rpx;
      }
    }

  }

  .cus-swiper-upload__upload {
    width: 218rpx;
    height: 218rpx;
    background-color: #F7F8FA;
    border-radius: 4rpx;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cus-swiper-upload__upload-text {
      margin-top: 6rpx;
      font-size: 24rpx;
      color: #86909C;
      line-height: 34rpx;
    }
  }
}

::v-deep .u-upload {
  .u-upload__wrap__preview {
    &:nth-child(3n+3) {
      margin-right: 0 !important;
    }
  }

  .u-upload__deletable {
    width: 28rpx !important;
    height: 28rpx !important;

    .uicon-close {
      font-size: 24rpx !important;
      line-height: 24rpx !important;
    }
  }

  .u-upload__success {
    .u-upload__success__icon .uicon-checkmark {
      font-size: 30rpx !important;
      line-height: 32rpx !important;
    }
  }
}
</style>
